<template>
  <require from="@process-engine/bpmn-js-custom-bundle/bpmn-modeler-custom.css"></require>
  <require from="./heatmap.css"></require>
  <div class="heatmap">
    <h3 if.bind="!activeDiagram" class="heatmap__empty-message">No diagram selected.</h3>
    <h3 if.bind="noRuntimeInformation" class="heatmap__empty-message">No runtime information found.</h3>
    <div if.bind="activeDiagram && !noRuntimeInformation"ref="viewerContainer" class="heatmap__viewer-container"></div>
    <div class="heatmap__legend">
      <span class="heatmap__legend-entry heatmap__legend-entry-first">Median runtime:</span>
      <span class="heatmap__legend-entry"><i class="fas fa-stop green"></i> Ok</span>
      <span class="heatmap__legend-entry"><i class="fas fa-stop red"></i> Not ok</span>
      <span class="heatmap__legend-entry"><i class="fas fa-stop black"></i> No information</span>
    </div>
  </div>
</template>
